<template>
  <div class="home">
    <!-- 搜索框 -->
    <van-search placeholder="请输入搜索关键词" background="#d81e06" />
    <!-- 滚动分类 -->
    <van-tabs
      color="#2c2c2c"
      background="#d81e06"
      title-inactive-color="#e6e6e6"
      title-active-color="#FFF"
      v-model="categoryActive"
    >
      <van-tab
        v-for="(category, index) in categories"
        :key="category.id"
        :title="category.name"
        :to="index !== 0 ? {name: 'sub', params: { id: category.id }} : null"
      ></van-tab>
    </van-tabs>

    <!-- 轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="banner in banners" :key="banner.id">
        <img v-lazy="banner.imageUrl" class="banner-img" />
      </van-swipe-item>
    </van-swipe>

    <!-- 宫格内容 -->
    <div class="grid">
      <div class="grid-item" v-for="grid in grids" :key="grid.id">
        <div class="icon">
          <img :src="grid.imageUrl" alt="">
          <div class="badge" v-if="grid.text">{{grid.text}}</div>
        </div>
        <div class="text">{{grid.title}}</div>
      </div>
    </div>

    <!-- 推荐商品列表-无限加载 -->
    <div class="baokuan-header"></div>
    <van-list
      :style="{marginTop: '-40px'}"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-card
        v-for="product in list"
        :thumb="product.image"
        :key="product.id"
        @click="jumpToDetail(product.id)"
      >
        <!-- 自定义商品描述 -->
        <div class="ranking-tag" slot="desc" v-if="product.rankingTag">
          <img src="@/assets/ranking-img.png" alt="">
          {{product.rankingTag}}
        </div>
        <!-- 自定义标题 -->
        <div class="van-cart__title van-ellipsis" slot="title">{{ product.title }}</div>
        <!-- 自定义标签位置内容：显示价格与原价 -->
        <template v-slot:tags>
          <span class="price">
            券后￥ <span class="bold">{{ product.price | money }}</span>
            <span class="origin-price">￥{{ product.originPrice }}</span>
          </span>
        </template>
        <!-- 自定义价格区域，显示优惠券 -->
        <template #price>
          <van-tag
            plain
            type="primary"
            color="#f00"
            v-if="product.couponValue"
          >{{ product.couponValue }}</van-tag>
        </template>
        <!-- 自定义数量区域，显示月销 -->
        <template #num>
          <span>月销 {{product.saleNum | saleNum}}</span>
          <van-icon name="cart-o" color="#f00" @click.stop="handleAddToCart(product)" />
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script>
import { getAllCategories } from '@/api/category'
import { getBanners, getRecommendProducts, getGrids } from '@/api/home'
// import rankingImg from '@/assets/ranking-img.png'
export default {
  name: 'Home',
  data() {
    return {
      categories: [], // 所有分类
      banners: [], // 轮播图
      list: [], // 推荐商品的数组
      loading: false, // 是否正在加载推荐商品
      finished: false, // 是否所有推荐商品加载完毕
      nextIndex: 0, // 下一页数据的起始索引
      grids: [], // 轮播图下宫格数据
      categoryActive: 0, // 分类滚动的激活索引
    }
  },
  created() {
    // console.log('home created...')
    // 查询所有分类
    getAllCategories()
      .then(resData => {
        this.categories = resData.list
      })
      .catch(err => console.log('访问分类异常:', err))

    // 查询轮播图与宫格数据
    getBanners()
      .then(resData => {
        this.banners = resData.banners
      })
    getGrids()
      .then(resData => {
        this.grids = resData
      })
  },
  // beforeDestroy() {
  //   console.log('home destroy...')
  // },
  activated() {
    // console.log('home activated...')
    this.categoryActive = 0
  },
  // deactivated() {
  //   console.log('home deactivated...')
  // },
  methods: {
    /**
     * 加载推荐商品的数据
     */
    onLoad() {
      getRecommendProducts(this.nextIndex)
        .then(data => {
          // 保存待渲染数据
          // this.list = this.list.concat(data.list)
          // this.list.push(...data.list)
          this.list = [
            ...this.list,
            ...data.list,
          ]
          // 将列表加载的 loading 设置为 false
          this.loading = false
          // 下一页起始索引
          this.nextIndex = data.nextIndex
          // 设置是否所有数据查询完毕
          this.finished = data.isEnd
        })
    },
    /**
     * 跳转到详情页面
     */
    jumpToDetail(id) {
      // // 传递字符串参数
      // this.$router.push('/detail?id=' + id) // 查询字符串参数
      // this.$router.push('/detail/' + id) // 动态路径参数

      // // 传递对象参数，对象中设置 path 与 query 字段
      // this.$router.push({
      //   path: '/detail',
      //   query: {
      //     id,
      //   },
      // })

      // 传递对象参数，对象中设置 name 与 params 字段
      // 注意：传递对象中，path 与 params 不能共存，当
      // 同时出现时，会忽略 params 参数。params 通常与
      // name 配合使用（name 是命名路由的名称）
      this.$router.push({
        name: 'detail',
        params: {
          id,
        },
      })
    },
    /**
     * 加入购物车
     */
    handleAddToCart(prod) {
      // 解构当前商品详情中的各属性
      const { id, title, image, price } = prod
      // 构建当前选购的商品对象
      const currentProduct = {
        id,
        title,
        image,
        price,
        amount: 1,
      }
      // 保存到 store 中
      // 组件中不能直接调用到 mutation 方法，而是
      // 需要使用 store.commit() 提交 mutation
      // 'cartModule/addToCart' 表示的是 cartModulet
      // 名字空间下的 addToCart 这个 mutation 方法
      this.$store.commit('cartModule/addToCart', { currentProduct })
      // 提示加入购物车成功
      this.$toast({
        type: 'success',
        message: '加入购物车',
      })
    },
  },
  filters: {
    // 注册局部过滤器，用于显示销量
    saleNum(val) {
      return val < 10000 ? val : (val / 10000).toFixed(1) + '万'
    },
  },
}
</script>

<style lang="less" scoped>
  .banner-img {
    width: 750px;
    height: 280px;
  }
  .grid {
    display: flex;
    font-size: 12px;
    margin: 16px 0;

    &-item {
      flex: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 88px;
        height: 88px;
      }
      .badge {
        width: fit-content;
        position: absolute;
        right: 6px;
        top: 0px;
        padding: 0 6px;
        border-radius: 30px;
        border-bottom-left-radius: 0;
        background: #d81e06;
        color: #fff;
      }
    }
  }
  .baokuan-header {
    height: 160px;
    background: url(../../assets/baokuan-title.png) no-repeat;
    background-size: 100% 100%;
  }
  .ranking-tag {
    background: linear-gradient(92deg,#ff5201,#fa8c16);
    width: fit-content;
    border-radius: 25px;
    padding: 6px 18px;
    color: #fff;
    position: relative;
    margin: 10px 0;

    img {
      position: absolute;
      top: -12px;
      left: 16px;
      width: 33px;
      height: 15px;
    }
  }
  .price {
    color: #f00;
    .bold {
      font-weight: 700;
      font-size: 20px;
    }

    .origin-price {
      color: #ccc;
      text-decoration: line-through;
      padding: 0 24px;
    }
  }
</style>
